<template>
  <div>
    <div style="display: inline-block;">
      <el-transfer
        v-model="outputListTemp2"
        :data="inputList"
        :props="alias"
        target-order="push"
        @right-check-change="rightCheck"
        :titles="['字段列表', '显示字段']"
        :button-texts="['移除', '添加']"></el-transfer>
    </div>
    <div style="margin-top: 95px;margin-left: 30px;display: inline-block;">
      <div style="margin-bottom: 10px;">
        <el-button icon="el-icon-arrow-up" :disabled="upDownDisable" @click="upData">上移</el-button>
      </div>
      <div>
        <el-button icon="el-icon-arrow-down" :disabled="upDownDisable" @click="downData">下移</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'elTransferMove',
  props: {
    inputList: { // 字段列表: 格式[{prop: 'name', label: '姓名'},{prop: 'age', label: '年龄'}]
      type: Array,
      default: []
    },
    alias: { // 配合字段列表使用: 格式{key:'prop',label:'label'}
      type: Object
    },
    outputListTemp: { // 右侧默认选中项: 格式['name', 'age']
      type: Array,
      default: []
    }
  },
  data () {
    return {
      upDownDisable: true,
      tempSelectionKeys: []
    }
  },
  computed: {
    outputListTemp2: {
      get () {
        return this.outputListTemp
      },
      set (val) {
        this.$emit('changeOutputListTemp', val)
      }
    }
  },
  methods: {
    // 右侧被选中时触发
    rightCheck (selectionKeys, changeKeys) {
      this.tempSelectionKeys = selectionKeys
      if (selectionKeys.length > 0) {
        this.upDownDisable = false
      } else {
        this.upDownDisable = true
      }
    },
    upData () {
      if (this.tempSelectionKeys.length > 1) {
        this.$message({
          type: 'warning',
          message: '仅支持单选调顺序'
        })
        return
      }
      let indexNum = 0
      for (let i = 0; i < this.tempSelectionKeys.length; i++) {
        indexNum = this.outputListTemp2.indexOf(this.tempSelectionKeys[i])
        if (indexNum > 0) {
          this.outputListTemp2.splice(indexNum - 1, 0, this.tempSelectionKeys[i])
          this.outputListTemp2.splice(indexNum + 1, 1)
        }
      }
    },
    downData () {
      if (this.tempSelectionKeys.length > 1) {
        this.$message({
          type: 'warning',
          message: '仅支持单选调顺序'
        })
        return
      }
      let indexNum = 0
      for (let i = 0; i < this.tempSelectionKeys.length; i++) {
        indexNum = this.outputListTemp2.indexOf(this.tempSelectionKeys[i])
        if (indexNum > -1 && indexNum != this.outputListTemp2.length - 1) {
          this.outputListTemp2.splice(indexNum + 2, 0, this.tempSelectionKeys[i])
          this.outputListTemp2.splice(indexNum, 1)
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>
